<template>
  <div class="home">
    <div class="navBar">
        <LeftNav/>
    </div>
    <div class="layout">
       <h1>App 1</h1>
     <router-link to="/app2/about">App2's about page</router-link>
    </div> 
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import LeftNav from '@/components/LeftNav.vue'

export default {
  name: 'home',
  components: {
    HelloWorld,
    LeftNav
  }
}
</script>
<style  scoped>

.navBar{
  width:10%;
  height: 100%;
  float: left;
}
.layout{
  float: left;
  width: 88%;
  height: 300px;
  margin-left: 20px;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 5px #888888;
}
</style>
